<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			.f{
				font-size: 100px;
				color:red;
				border: 4px solid greenyellow;
				border-radius: 50%;
				height: 300px;
			
			}
			p img{
				height: 400px;
				width: 400px;
			}
		</style>
		<script src="../js/jquery-3.4.1.min.js"></script>
		<script>
			//隐式迭代，链式操作
			$(function() {
				$("div").text("<a href='#'>This is div</a>").css({
					"border": "4px solid red",
					"color": "red",
					"font-size": "60px"
				});
				jQuery("div:first").html("<a href='#'>定国是个大帅锅</a>");
				//$("h1,h3").attr("align","right");
				$("h1,h3").prop("align","center").addClass("f");
				//绑定一个事件
				$("#btn1").click(function(){
					alert("高："+ $(window.document.body).outerHeight());
					alert("宽："+ $(window.document.body).outerWidth());
					alert($("p img").css("height"));
				});
				//第二种绑定事件的方式
				$("#btn2").bind("click",function(){
					$("img").toggleClass("f");
				});
			});
		</script>
	</head>

	<body>
		<div></div>
		<div></div>
		<div></div>
		<div></div>
		<div></div>
		<div></div>
		<div></div>
		<div></div>
		<div></div>
		<h1>教育改变生活</h1>
		<h3>自己改变，才是真的变</h3>
		<p>
			<img src="../day7/2.jpg"/>
		</p>
		<button id="btn1" type="button">获得外部高度和宽度</button>
		<button id="btn2" type="button">给图片加/去样式</button>
	</body>
</html>
